<template>
	<view class="addcollectioncode">
		<view class="">
			<view class="upload" @click="uploadBanner(0)" v-if="!upimage">
				<view class="upload-content">
					<view class="bg-img"></view>
					<image :src="imglink + 'member/up.png'" mode="" class="upload-img"></image>
					<view class="prop">
						上传宣传单页
						<view class="redzi">
							正面
						</view>
					</view>
					<view class="specs">
						规格1350*750px
					</view>
				</view>
			</view>
			<view class="upload" v-if="upimage">
				<image class="upload-content" :src="upimage" mode=""></image>
				<image :src="imglink + 'member/shanchu.png'" mode="" class="butt" @click="empty(0)"></image>
			</view>
			<view class="upload" @click="uploadBanner(1)" v-if="!upimageBack">
				<view class="upload-content">
					<view class="bg-img"></view>
					<image :src="imglink + 'member/up.png'" mode="" class="upload-img"></image>
					<view class="prop">
						上传宣传单页
						<view class="redzi">
							反面
						</view>
					</view>
					<view class="specs">
						规格1350*750px
					</view>
				</view>
			</view>
			<view class="upload" v-if="upimageBack">
				<image class="upload-content" :src="upimageBack" mode=""></image>
				<image :src="imglink + 'member/shanchu.png'" mode="" class="butt" @click="empty(1)"></image>
			</view>
		</view>
		<view class="msgda">
			<view class="msg">
				<view class="required">
					*
				</view>
				活动名称
			</view>
			<textarea class="txt" placeholder="请输入活动名称" maxlength="20" @input="descInput" v-model="reason"/>
			<view class="num">{{remnant}}/20</view>
		</view>
		<view class="msgda">
			<view class="msg">
				<view class="required">
					*
				</view>
				活动备注
			</view>
			<textarea class="txt" placeholder="请输入活动备注" maxlength="20" @input="remarksInput" v-model="remarks" />
			<view class="num2">{{remarkslength}}/20</view>
		</view>
		<view class="information">
			<view class="collect-information">
				<view class="collect">*</view>
				收集家长信息
				<span style="color:red;font-size: 24rpx;margin-left: 10rpx;">(添加后不可修改)</span>
				<!-- <add-form @getActForm='getActForm($event)' :store_id='store_id' :token="token" :clickFlag="editAct.participants > 0 ? 0:1" :page_operate="page_operate"></add-form> -->
			</view>
			
			<view class="arrange">
				<view class="collect-reversal" :class="{'reversal': item.selected === 1}" 
					v-for="(item,index) in actFormOption" @click="choseForm(index)">{{item.name}}</view>
					<view class="explain_tip" @click="addField" >
						+添加新字段
					</view>
			</view>
		</view>
		<view class="off" v-if="commission == 1">
			<view class="collect-information">
				<view class="collect">*</view>
					家长领取线上课程佣金收益<switch :checked='is_list == 1' @change="switchCommission"  color="#FF8B46" style="text-align: center; margin-left: 150upx;"/>
			</view>
		</view>
		<view v-if="is_list == 1&&item.status!=0" v-for="(item,index) in courseList" :key="index" class="olinecourse">
			<view class="topleft"><image style="width: 100%;height: 100%;" :src="item.img" mode="aspectFit"></image></view>
			<view class="topright">{{item.titles}}</view>
			<view style="color: red;">￥{{item.special_price}}<radio color="#FF8B46" style="float:right;position: relative;top: 10upx;left: 10upx;" :value="item.id" :checked="item.id === current" @click="dianji(item.id)" /></view>
			<view style="margin-left:35upx;margin-top: 20upx; font-size: 30upx;font-weight: bold;">
				<view style="color:#8C939D" v-if="minmoney!='0'&&minmoney">新用户下单奖励<text v-if="minmoney!='0'&&minmoney">(新客单>{{minmoney}}元)</text>：<text style="color: #FF8B46;">￥{{reward_new_user_money}}</text></view>
				<view style="color:#8C939D">直接推荐成功收益：<text style="color: #FF8B46;">￥{{item.first_money}}</text></view>
				<view style="color:#8C939D">下级推荐成功收益：<text style="color: #FF8B46;">￥{{item.second_money}}</text></view>
				<view style="color:#8C939D">提成规则：<text style="color: #8C939D;">{{item.illustration}}</text></view>
			</view>
		</view>
		<view class="btn1"></view>
		<button class="btn" @click="addcollections" v-if="imageShow&&reason">创建活动收款码</button>
		<button class="unbtn" v-if="!imageShow||!reason">创建活动收款码</button>
		<uni-popup ref="actPublish" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="closeState"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						<view class="popup-line"></view>
						<view class="">添加新信息收集字段</view>
						<view class="popup-line"></view>
					</view>
					<view class="field-name">
						<view class="">
							字段名称
						</view>
						<input type="text" v-model="fieldName" maxlength="4" placeholder="请输入字段名称" />
					</view>
					<view class="field-name">
						<view class="">
							字段类型
						</view>
						<view class="field-type">
							<radio-group @change="radioChange" style="justify-content: space-between;">
								<label class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in fieldType" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="index === current" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="field-name">
						<view class="">
							是否必填
						</view>
						<view class="field-type">
							<radio-group @change="radioChangeRequired">
								<label style="margin-right: 30upx;" class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in isRequired" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="index === currentRequired" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="sure-add-btn" @click="sureAdd">
						确定添加
					</view>
					<view class="sure-cancel-btn" @click="closeState">
						取消
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../../components/uni-popup/uni-popup.vue'
	import {uploadFile} from '@/common/alioss.js'
	// import addForm from './form/addForm'
	export default {
		components:{uniPopup},
		data() {
			return {
				current:0,
				online_courses_off:0,
				courseList:[],
				commission:0,
				is_list:0,
				remarkslength:0,
				remarks:'',
				fieldTypeText:'0',
				isRequiredText:'1',
				currentRequired:0,
				isRequired:[
					{name:'必填',value:'1',check:'true'},
					{name:'选填',value:'0',},
				],
				current:0,
				fieldType:[
					// {name:'图片',value:'0',check:'true'},
					{name:'文字',value:'1',},
					// {name:'时间',value:'2',}
				],
				fieldName:'',
				editAct:{},
				page_operate:'',
				token:'',
				imglink: this.$store.state.imgLink,
				reason:'',
				remnant:0,
				upimage:'',
				upimageBack:'',
				store_id:'',
				imageShow: false,
				images:[],
				page_operate:'add',
				actFormOption:[
					{"id":261,"value":"","name":"报名科目","state":1,"placeholder":"请填写你报名科目，比如英语，舞蹈",selected:1,click:1},
					{"id":262,"value":"","name":"孩子姓名","state":1,"placeholder":"请填写孩子姓名",selected:1,click:1},
					{"id":263,"value":"","name":"联系电话","state":1,"placeholder":"请填写联系电话，例如 6",selected:1,click:1,},
					{"id":264,"value":"","name":"孩子年龄","state":1,"placeholder":"请填写付款金额",selected:1,click:1},
					{"id":265,"value":"","name":"孩子性别","state":1,"placeholder":"请填写联系电话，例如 6",selected:1,click:1,},
					{"id":266,"value":"","name":"身高","state":1,"placeholder":"请填写联系电话，例如 6",selected:1,click:1,},
				],
				reward_new_user_money:0,
				minmoney:0
			}
		},
		onLoad(options) {
			uni.setStorageSync("store_id",uni.getStorageSync("shopID"))
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.getActForm(parseInt(store_id,10))
			this.getCourseList()
			this.getminmoney()
		},
		methods: {
			default_online_courses(){
				if(this.courseList.length>0){
					this.current = this.courseList[0].id
					console.log("进来了")
				}
				console.log("出来了",this.courseList.length)
			},
			getminmoney(){
				let data = {
					token:this.$store.getters.getToken,
					customer_store_id:this.$store.state.store_id
				}
				this.$api.gain_shop_msg(data).then(res => {
					if(res.status){
						console.log(res,"1456")
						this.minmoney=res.data.reward_new_user_pay_min
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:"none",
						duration:2000
					})
					
					console.log(err,'that.$api.get_store_income')
				})
			},
			dianji(index){
				
				this.current=Number(index)
				console.log(this.current,"this.current")
			},
			getCourseList(){
				this.courseList=[]
				let data={
					token:this.$store.getters.token,
					customer_store_id:this.store_id,
					status:1
				}
				// const that=this
				this.$api.get_online_courses(data).then(res=>{
					// this.courseList=res.list
					// res.list.filter(item=>{
					// 	if(item.title.length>20){
					// 		item.titles=item.title.slice(0,20)+"..."
					// 	}else{
					// 		item.titles=item.title
					// 	}
					// 	this.courseList.push(item)
					// })
					res.sel_res.filter(item=>{
						if(item.title.length>20){
							item.titles=item.title.slice(0,20)+"..."
						}else{
							item.titles=item.title
						}
						this.courseList.push(item)
					})
					this.default_online_courses()
					// this.current=res.list[0].id
					console.log(data,"ceshi")
					this.$api.gain_shop_msg(data).then(res=>{
						this.reward_new_user_money=res.data.reward_new_user_money
						if(res.data.open_recommend==1){
							this.commission=res.data.open_recommend
							console.log(this.commission,"commission");
							this.is_list=res.data.open_recommend
							this.online_courses_off=res.data.open_recommend
						}
						console.log(res.data,"tisi")
					})
				})
			},
			getActForm(store_id){
				let data = {
					token:this.$store.getters.token,
					store_id:store_id
				}
				this.$api.get_field_list(data).then(res => {
					// console.log(res.list)
					console.log(res,"shuju")
					res.list.map(res=>{
						res.selected=0;
						res.click=0;
						res.id=res.field_id
						this.actFormOption.push(res)
					})
				})
				console.log(this.actFormOption,"iiiii")
			},
			descInput(){
				var txtVal = this.reason.length;
				this.remnant = txtVal;
			},
			remarksInput(){
				var txtVal = this.remarks.length;
				this.remarkslength = txtVal;
			},
			addcollections(){
				let time = new Date()
				let arrar={}
				arrar.date_added = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
				arrar.course_msg=[]
				arrar.course_msg.push({
					image:this.images[0],
					name:this.reason,
					origin_price:0,
					special_price:0,
					group_purchase_price:"",
					limit_course:0,
					isOpenNum:false,
					give_cash_shopping_card_to_parents:0,
					isGive:false,
					cash_shopping_card_amount:"",
					courseDetails:{
						"type":"photo",
						"value":this.images[0]
					},
					"activity_course_description":[{"type":"photo","value":this.images[0]}],
					"activity_description":[{"type":"photo","value":this.images[0]}]
					})
					arrar.actFormMsg = this.actFormOption.filter(item => item.selected == 1)
				// arrar.actFormMsg=[
						// {"id":261,"value":"","name":"报名科目","state":1,"placeholder":"请填写你报名科目，比如英语，舞蹈"},
						// {"id":262,"value":"","name":"孩子姓名","state":1,"placeholder":"请填写孩子姓名"},
						// {"id":263,"value":"","name":"联系电话","state":1,"placeholder":"请填写联系电话"},
						// {"id":264,"value":"","name":"孩子年龄","state":1,"placeholder":"请填写孩子年龄，例如 6"},
						// {"id":265,"value":"","name":"孩子性别","state":1,"placeholder":"请填写孩子性别，比如 男，女"},
						// {"id":266,"value":"","name":"身高（选填）","state":1,"placeholder":"请输入孩子身高(cm)，比如 165"}]
				arrar.name=this.reason
				arrar.start_date=`${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
				arrar.end_date=`2040-01-01 00:00:00`
				arrar.allowed_total=1000000000 //名额总数（限制购买人数）
				arrar.enable_auto_add_allowed_total=1 //是否开启剩余20%自动增加名额
				arrar.enable_allowed_purchase_quantity=0 //是否开启每人限购科目数量
				arrar.allowed_purchase_quantity=1000000000 //每人允许购买数量
				arrar.enable_purchase_course_then_give_course=0 //是否开启买课程赠送课程
				arrar.purchase_course=0 //购买课程数量
				arrar.give_course=0 //赠送课程数量
				arrar.virtual_total=20 //虚报名额
				arrar.active_status=1 //活动状态:0未开始,1进行中,2已结束
				arrar.status=1 //系统状态:1启用，0停用
				arrar.activity_description="" //活动描述
				arrar.active_type="qrcode" //活动类型拼团：group,优惠：special,收款码：qrcode
				arrar.image=this.images
				let data  = {}
	
					if(this.online_courses_off==1 && this.commission==1 && this.is_list==1){
						data={
							token:this.$store.getters.getToken,
							// customer_id:uni.getStorageSync('customer_id'),
							store_id:this.$store.getters.getStoreId,
							// store_id:uni.getStorageSync('store_id'),
							arrar:JSON.stringify(arrar),
							operate_status:1,
							open_online_courses:1,
							online_courses_id:this.current,
							remark:this.remarks
						}
					}else{
						data={
							token:this.$store.getters.getToken,
							// customer_id:uni.getStorageSync('customer_id'),
							store_id:this.$store.getters.getStoreId,
							open_online_courses:0,
							// store_id:uni.getStorageSync('store_id'),
							arrar:JSON.stringify(arrar),
							remark:this.remarks,
							operate_status:1
						}
					}
					console.log(data)
				this.$api.add_group_act(data).then(res => {
					console.log(res)
					if(res.status){
							uni.showToast({
								title:'添加成功!',
								icon:'none',
								duration:2000,
							})
							setTimeout(() => {
								uni.navigateTo({
									url:"/pages/memberCenter/activityManage/activityManage?topNavActiveIndex=0&store_id="+this.$store.getters.getStoreId
								})
							},1000)
							
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				// uni.navigateTo({
				// 	url:'../activityManage/activityManage?topNavActiveIndex=0&store_id=' + this.store_id
				// })
			},
			empty(num){
				if(num == 0){
					this.upimage = ""
				}else{
					this.upimageBack = ""
				}
				if(this.upimage && this.upimageBack)
				{
					this.imageShow = true
				}else{
					this.imageShow = false
				}
			},
			uploadBanner(index){
				const that = this;
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						console.log(chooseImageRes,'chooseImageRes');
						// if(!/\.(gif|jpg|jpeg|png|bmp)$/.test(chooseImageRes.tempFiles[0].name)) {
							
						// 	uni.showToast({
						// 		title:'图片格式错误，须为gif/jpg/jpeg/png/bmp',
						// 		icon:'none',
						// 		duration:5000,
						// 	})
						// 	return false
						// }
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (image) => {
								uni.showLoading({
									title: '图片上传中'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res,"6666666666666666666666666")
									if(res.status){
										
										if(index==0){
											that.upimage=res.data.url
										}else{
											that.upimageBack=res.data.url
										}
										if(that.upimage && that.upimageBack)
										{
											this.imageShow = true;
										}
										that.images.splice(index,1,res.data.url)
										uni.setStorageSync('images',that.images)
										uni.hideLoading()
										
									}
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:5000,
									})
								})
							}
						})
					}
				})
			},
			// 点击收集选项
			choseForm(index){
				this.actFormOption[index].selected=this.actFormOption[index].selected === 1 ? 0 : 1
				console.log(index)
			},
			addField(){
				this.$refs.actPublish.open()
			},
			closeState(){
				this.$refs.actPublish.close()
			},
			radioChange: function(evt) {
				this.fieldTypeText = evt.target.value
				console.log(this.fieldTypeText,'字段类型')
				for (let i = 0; i < this.sexType.length; i++) {
					if (this.sexType[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				
			},
			radioChangeRequired: function(evt) {
				for (let i = 0; i < this.isRequired.length; i++) {
					if (this.isRequired[i].value === evt.target.value) {
						this.currentRequired = i;
						this.isRequiredText = evt.target.value
						console.log(this.isRequiredText,'是否必填')
						break;
					}
				}
			},
			// 添加活动字段
			sureAdd(){
				if(this.fieldName == ''){
					uni.showToast({
						title:'请输入字段名称',
						icon:"none",
						duration:2000
					})
					return false
				}
				let data = {
					token:this.token,
					store_id:this.$store.getters.getStoreId,
					name:this.fieldName,
					type:this.fieldTypeText,
					required:this.isRequiredText,
					status:1
				}
				console.log(data)
				this.$api.add_act_field(data).then( res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'添加成功',
							icon:"none",
							duration:2000
						})
						setTimeout(()=>{
							this.$refs.actPublish.close()
							this.getField()
							this.actFormOption.push({
								"id":this.actFormOption[this.actFormOption.length-1].id+1,
								"value":"",
								"name":this.fieldName,
								"state":1,
								"placeholder":"请输入"+this.fieldName,
								selected:0,
								click:1,
							})
						},2000)
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch( err =>{
					console.log(err)
				})
			},
			getField(){
				// 默认字段
				let defaultField =  [{
				    "id": 261, 
				    "store_id": 0, 
				    "name": "报名科目", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "id": 262, 
				    "store_id": 0, 
				    "name": "孩子姓名", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "id": 263, 
				    "store_id": 0, 
				    "name": "联系电话", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "id": 264, 
				    "store_id": 0, 
				    "name": "孩子年龄", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "id": 265, 
				    "store_id": 0, 
				    "name": "孩子性别", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "id": 266, 
				    "store_id": 0, 
				    "name": "身高（选填）", 
				    "type": 1, 
				    "required": 0, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}]
				
				let data = {
					token:this.token,
					store_id:this.store_id
				}
				this.$api.get_field_list(data).then(res => {
					console.log(res,'get_field_list')
					if(res.status){
						this.fieldList = res.list
						for(let i = 5;i>=0;i--){
							this.fieldList.unshift(defaultField[i])
						}
						console.log(uni.getStorageSync('editActAdd'),"uni.getStorageSync('editActAdd')");
							console.log(this.fieldMsgArray,"this.fieldMsgArray");
						if(this.fieldMsgArray.length==0){
							this.fieldMsgArray = uni.getStorageSync('editActAdd').actFormMsg
							if( Object.prototype.toString.call(this.fieldMsgArray)== '[object Array]'){
								this.fieldListIndex=[]
								this.fieldMsgArray.forEach(item => {
									this.fieldListIndex.push(item.id)
								})
							}else{
								this.fieldListIndex=[]
								this.fieldMsgArray = [];
							}
						}
					}
					// if(this.page_operate == 'add'){
					// 	for(let i = 0; i< 3;i++){
					// 		this.chooseMsg(defaultField[i])
					// 	}
					// }
					
				}).catch( err => {
					console.log(err)
				})
			},
			getFormMsg(id){
				let data = {
					token:this.$store.getters.getToken,
					activity_id:id
				}
				let that = this
				this.$api.together_order_msg(data).then(res => {
					console.log(res)
					if(res.status){
						let array = res.res
						let actFormMsg=[]
						array.forEach(item => {
							that.list.actFormMsg = []
							let infoMsg = {
								id:'',
								value:'',
								name:'',
								state:"",
								placeholder:''
							}
							infoMsg.id = item.name.field_id
							infoMsg.name = item.name.name
							infoMsg.state = item.name.required
							infoMsg.placeholder = '请输入' + item.name.name
							infoMsg.value = ''
							actFormMsg.push(infoMsg)
							console.log(infoMsg)
						})
						
						that.list.actFormMsg=actFormMsg
						that.editAct.actFormMsg=actFormMsg
						that.$store.state.actForm=actFormMsg
						// that.list.actFormMsg = res.res
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 是否开启音乐
			switchCommission(e){
				if(e.target.value){
					console.log(e.target.value);
					this.is_list = 1
				}else{
					this.is_list = 2
				}
			},
		}
	}
</script>

<style scoped>
	.olinecourse{
		/* box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13); */
		border: solid rgba(0,0,0,0.13) 1px;
		border-left: none;border-right: none;border-bottom: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 690upx;
		margin-left: 30upx;
	}
	.olinecourse:nth-child(3){
		border-top: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 690upx;
		margin-left: 30upx;
	}
	.label{
		width: 200upx;
		height: 300upx;
		background-image: required("https://tool.tuanhaoke.cn/static/image/member/orangelabel.svg");
	}
	.topleft{
		width: 280upx;
		height: 150upx;
		/* position: relative;
		left: 0upx; */
		float: left;
	}
	.topright{
		width: 400upx;
		height: 100upx;
		font-size: 30upx;
		font-weight: bold;
		float: left;
	},
	.explain_tip{
		width: 240upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		margin-top: 13upx;
		display: flex;
		font-size: 24upx;
	}
	.explain_tip>view{
		width: 50%;
		color: #666666;
		border-radius: 32upx;
	}
	.explain_tip>.explain_tip-active{
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
	}
	.act-time-set{
		width: 100%;
		line-height: 80upx;
		display: flex;
		background: #F5F5F5;
		border-radius: 4upx;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.off{
		display: inline-block;
		margin-top: 26upx;
		margin-left: 30upx;
		padding-top: 25upx;
		width: 690upx;
		height: 100upx;
		overflow: hidden;
		/* border-radius: 8upx; */
		/* box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13); */
		vertical-align: middle;
	}
	.msgda{
		display: inline-block;
		margin-top: 26upx;
		margin-left: 30upx;
		width: 690upx;
		height: 300upx;
		overflow: hidden;
		border-radius: 8upx;
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
		vertical-align: middle;
	}
	.upload{
		display: inline-block; 
		margin-top: 26upx;
		margin-left: 30upx;
		width: 330upx;
		height: 430upx;
		overflow: auto;
		border-radius: 8upx;
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
		vertical-align: middle;
	}
	.bg-img{
		position: absolute;
		top: 90upx;
		width: 230upx;
		height: 300upx;
		z-index: 0;
		margin-left: 35upx;
		border-radius: 10upx;
		background-color: rgba(255,112,76,0.2);
	}
	.upload-content{
		margin-top: 13upx;
		margin-left: 17upx;
		width: 296upx; 
		height: 396upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/border.png) no-repeat;
		background-size:100% 100%; 
		text-align: center;
	}
	.upload-img{
		width: 96upx;
		height: 97upx;
		margin-top: 113upx;
	}
	.specs{
		font-family: PingFangSC-Light; 
		font-size: 20upx; 
		/* z-index: 1; */
		color: #CCCCCC;
	}
	.prop{
		margin-top: 7.5upx;
		font-size: 24upx;
		color: #999;
		/* z-index: 1; */
	}
	.redzi{
		display: inline-block;
		margin-top: 4upx;
		color: #FF8B46;
	}
	.msg{
		font-family: PingFangSC-Medium;
		margin-top: 18upx;
		margin-bottom: 20upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.msg .required{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.txt{
		margin-left: 30upx;
		margin-bottom: 300upx;
		padding: 24upx;
		width: 600upx;
		height: 138upx;
		font-size: 24upx;
		background-color: rgba(0,0,0,0.13);
		border-radius: 12upx;
		/* border: #000000 solid 1px; */
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
	}
	.num{
		position: absolute;
		right: 54upx;
		top: 700upx;
		font-size: 24upx;
		color: #999999;
	}
	.num2{
		position: absolute;
		right: 54upx;
		top: 1020upx;
		font-size: 24upx;
		color: #999999;
	}
	.addcollectioncode .btn1{
		position: relative;
		width: 638upx;
		height:120upx;
		/* color: #ffffff; */
		font-size: 28upx;
		line-height: 100upx;
		/* border-radius: 60upx; */
		background: rgba(255,25,25,0%);
	}
	.addcollectioncode .btn{
		/* position: relative; */
		position: fixed;
		bottom: 0upx;
		left:65upx;
		width: 638upx;
		color: #ffffff;
		font-size: 28upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/member-center.png);
	}
	.unbtn{
		/* position: relative; */
		position: fixed;
		bottom: 0upx;
		left:65upx;
		width: 638upx;
		color: #ffffff;
		font-size: 28upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-color: #F6CDAB;
	}
/* 	.mask{
		position: fixed;
		bottom: 64upx;
		width: 750upx;
		height: 150upx;
		z-index: 998;
		background: rgba(255, 255, 255, 0.6);
	} */
	.butt{
		position: absolute;
		display: inline-block;
		margin-left: -50upx;
		margin-top: 35upx;
		width: 36upx;
		height: 36upx;
	}
	.information{
		display: inline-block;
		margin-top: 26upx;
		margin-left: 30upx;
		width: 690upx;
		height: 110%;
		overflow: auto;
		border-radius: 8upx;
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
		vertical-align: middle;
	}
	.collect-information{
		/* position: relative; */
		font-family: PingFangSC-Medium;
		/* top: -250upx; */
		/* margin-top: 250upx; */
		margin-bottom: 40upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.collect{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.arrange{
		/* position: relative; */
		/* top: -250upx; */
	}
	.arrange-conent{
		float: left;
		margin-left: 47upx;
		padding: 10upx 20upx;
		border: 1upx solid #FF664F;
		border-radius: 10upx;
		font-size: 35upx;
		font-weight: 500;
		height: 50upx;
		width: 150upx;
		text-align: center;
		background: #FFFFFF;
		color: #FF664F;
	}
	.collect-reversal{
		float: left;
		margin-bottom: 40upx;
		margin-left: 18upx;
		padding: 10upx 20upx;
		border: 1upx solid #CBC7C7;
		border-radius: 6upx;
		font-size: 35upx;
		font-weight: 500;
		height: 50upx;
		width: 170upx;
		text-align: center;
		background: #FFFFFF;
		color: #666666;
	}
	.reversal{
		color: #FF664F;
		border: 1upx solid #FF664F;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/hook.svg);
		background-repeat: no-repeat;
		background-size: 24rpx 24rpx;
		background-position: right bottom;  
	}
	.explain_tip{
		width: 176upx;
		height: 100upx;
		line-height: 48upx;
		text-align: center;
		/* border: 1upx solid #FF8B46; */
		color: #FF8B46;
		font-size: 24upx;
		border-radius: 40upx;
		float: left;
	}
	/* 弹框样式 */
	.popup_box_de_del{
		height: 336upx;
		width: 640upx;
		background: #FFFFFF;
		border-radius: 24upx;
		padding-top: 40upx;
		box-sizing: border-box;
	}
	.popup_box-tip{
		text-align: center;
		color: #353535;
		font-size: 36upx;
		font-weight: 800;
	}
	.popup_box-reminder{
		width: 544upx;
		text-align: center;
		padding: 0 10upx;
		box-sizing: border-box;
		color: #666666;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.popup_box-click{
		width: 100%;
		height: 112upx;
		margin-top: 80upx;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		display: flex;
	}
	.popup_box-click>view{
		width: 50%;
		line-height: 112upx;
		text-align: center;
		font-size: 34upx;
	}
	.popup_box-click>view:first-child{
		color: #000000;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.popup_box-click>view:last-child{
		color: #FF8B46;
	}
	.add-shop-manage{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 152upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.del-icon>image{
		width: 48upx;
		height: 48upx;
		margin-top: 58upx;
	}
	/* 添加新信息收集字段 */
	.popup_box_de{
		height: 848upx;
		width: 590upx;
		position: relative;
		/* z-index: 999; */
	}
	.popup_box_close{
		width: 56upx;
		height: 56upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 784upx;
		background: #FFFFFF;
		position: absolute;
		top: 64upx;left: 0;
		z-index: 999;
		border-radius: 16upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.popup_box_title{
		width: 100%;
		display: flex;
	}
	.popup-line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 64upx;
		margin-right: 12upx;
	}
	.popup-line:first-child{
		margin-left: 28upx ;
	}
	.popup-line:last-child{
		margin-left: 12upx;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
	}
	.field-name{
		display: flex;
		width: 100%;
		height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-top: 60upx;
	}
	.field-name>view:first-child{
		width: 27%;
		text-align: center;
		line-height: 80upx;
		background: #ECECEC;
		color: #333333;
		font-size: 28upx;
	}
	.field-name>input{
		flex-grow: 1;
		height: 80upx;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	radio-group{
		padding: 0 20upx 0 26upx;
		box-sizing: border-box;
	}
	.field-type,radio-group{
		flex-grow: 1;
		display: flex;
	}
	.type-common{
		display: flex;
	}
	.type-common>view>radio{
		transform:scale(0.8);
	}
	.type-common>view{
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
	}
	.sure-add-btn{
		width: 480upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 44upx;
		font-size: 32upx;
		color: #FFFFFF;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		background: linear-gradient(to right,#FE9543,#FF664F);
		margin: 0 auto;
		margin-top: 15upx;
	}
	.sure-cancel-btn{
		width: 478upx;
		height: 78upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 44upx;
		font-size: 32upx;
		color: #666666;
		border: 1upx solid #D9D9D9;
		/* box-shadow: 0 8upx 16upx 0 rgba(255, 255, 255, 1); */
		background: linear-gradient(to right,#ffffff,#ffffff);
		margin: 0 auto;
		margin-top: 15upx;
	}
	page{
		background: #F3F3F4;
	}
	.form-page{
		width: 100%;
		height: 100%;
	}
	.person-msg-content{
		width: 100%;
		padding-left: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.person-msg-details{
		width: 100%;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1upx solid #DEDEDE;
	}
	.person-msg-details:last-child{
		border-bottom: 0;
	}
	.msg-tip{
		width: 112upx;
		color: #666666;
		font-size: 28upx;
		text-align: center;
		padding-top: 0upx;
		box-sizing: border-box;
	}
	.msg-input{
		flex-grow: 1;
		display: flex;
		margin-left: 40upx;
	}
	.msg-input>input{
		flex-grow: 1;
		font-size: 28upx;
	}
	.is-required{
		display: flex;
		margin-top: 8upx;
	}
	.is-required>image{
		width: 28upx;
		height: 28upx;
	}
	.is-required>text{
		color: #999999;
		font-size: 22upx;
	}
	.sex-child{
		display: flex;
		flex-grow: 1;
	}
	.sex-common image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.sex-common{
		display: flex;
		margin-right: 100upx;
	}
	.sex-common>view{
		font-size: 28upx;
		color: #333333;
		margin-left: 10upx;
	}
	.field-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 18upx;
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title{
		display: flex;
		margin-top: 4upx;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
		font-weight: 800;
	}
	.explain_tip{
		width: 176upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		/* border: 1upx solid #FF8B46; */
		color: #FF8B46;
		font-size: 24upx;
		border-radius: 40upx;
	}
	.field-details{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.field-details>view{
		width: 152upx;
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		font-size: 28upx;
		border-radius: 28upx;
		margin-right: 20upx;
		margin-top: 26upx;
		position: relative;
	}
	.field-details-noselect{
		background: #F2F2F2;
	}
	.field-details-active{
		background: #FF8B46;
		color: #FFFFFF;
	}
	.save-field{
		width: 638upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0 auto;
		margin-top: 212upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx ;
		box-shadow: 0 4upx 12upx 0 #8CFAB030;
	}
	.del-filed{
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: -14upx;right: -12upx;
	}
</style>
